<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2022/1/18
  Time: 15:40
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="../static/js/jquery-3.4.1.js"></script>
    <script>
        function login(){
            var loginform = $("#loginform").serializeArray();
            $.ajax({
                url:"../user/register",
                data:loginform,
                type:"post",
                dataType:"json",
                success:function (data){
                    if (data.length==0){
                        alert("注册失败");
                        location.href="../page/register";
                    }else{
                        alert("注册成功");
                        location.href="/page/update";
                    }
                }
            })
            return false;
        }
        $(function(){
            init();
        })
        //切换注册页面，分为教师页面和学生页面
        function change(){
            var role = $("#role :selected").val();
           var table = $("table tr");
           if (role == 1){
               var str="<caption><h3>高校点名考勤系统</h3></caption><tr>"+table[0].innerHTML+"</tr><tr>"+table[1].innerHTML+"</tr>";
                str+= "<tr>"+table[2].innerHTML+
                    "<tr>" +
                    "    <td>班级:</td>" +
                    "    <td>" +
                    "        <input type='text' id='clazz' name='clazz'  placeholder='请输入班级'>" +
                    "     </td>" +
                    "</tr>"
                    +"</tr><tr>"+table[3].innerHTML
                    +"</tr><tr>"+
                    "<td>用户角色:</td>" +
                    "            <td>" +
                    "                <select name=\"role\" id=\"role\" onchange=\"change()\" size=\"1\">\n" +
                    "                <option selected  value=\"1\">学生</option>\n" +
                    "                <option value=\"2\">任课老师</option>\n" +
                    "                </select>\n" +
                    "            </td>"
                    +"</tr><tr>"+table[5].innerHTML
                    +"</tr><tr>"+table[0].innerHTML+"</tr>" +
                    "<tr>"+table[0].innerHTML+"</tr>";
                $("table").html(str);
            }
           else if(role == 2){
               var str="<caption><h3>注册用户页面</h3></caption><tr>"+table[0].innerHTML+"</tr><tr>"+table[1].innerHTML+"</tr>";
               str+="<tr>"+table[2].innerHTML
                   +"</tr><tr>"+table[4].innerHTML
                   +"</tr><tr>"+
                   "<td>用户角色:</td>" +
                   "            <td>" +
                   "                <select name=\"role\" id=\"role\" onchange=\"change()\" size=\"1\">\n" +
                   "<%--                <option></option>--%>\n" +
                   "                <option  value=\"1\">学生</option>\n" +
                   "                <option selected value=\"2\">任课老师</option>\n" +
                   "                </select>\n" +
                   "            </td>"
                   +"</tr><tr>"+table[6].innerHTML
                   +"</tr><tr>"+table[0].innerHTML+"</tr>" +
                   "<tr>"+table[0].innerHTML+"</tr>";
               $("table").html(str);
            }
        }
        //初始页面
        function init(){
            var role = $("#role :selected").val();

           var table = $("table tr");
            // alert(table[0].innerHTML);
            if (role == 1){
                var str="<caption><h3>高校点名考勤系统</h3></caption><tr>"+table[0].innerHTML+"</tr><tr>"+table[1].innerHTML+"</tr>";
                str+="<tr>" +
                    "     <td>性别:</td>" +
                    "     <td>" +
                    "         <input type='radio' id='gender' name='gender' value='男' checked>男" +
                    "         <input type='radio' id='gender' name='gender'value='女' >女" +
                    "     </td>" +
                    "</tr>" +
                    "<tr>" +
                    "    <td>班级:</td>" +
                    "    <td>" +
                    "        <input type='text' id='clazz' name='clazz'  placeholder='请输入班级'>" +
                    "     </td>" +
                    "</tr>"+
                    "<tr>"+table[2].innerHTML
                    +"</tr><tr>"+table[3].innerHTML
                    +"</tr><tr>"+table[4].innerHTML
                    +"</tr><tr>"+table[0].innerHTML+"</tr>" +
                    "<tr>"+table[0].innerHTML+"</tr>";
                $("table").html(str);
            }
        }
        function register(){
            var register = $("#registerForm").serializeArray();
            $.ajax({
                url:"../user/register",
                type:"post",
                data: register,
                dataType:"json",
                success:function (data){
                if (data){
                    alert("注册成功！！！")
                    location.href="/page/login";
                }else{
                    alert("注册失败！！！")
                    location.href="/page/register";
                }
                }
            })
            return false;
        }
    </script>
</head>
<style>
    body{
    background-color: #A9E2F3;
    }
    table,form{
        margin-left: auto;
        margin-right: auto;
        margin-top: 200px;
        border-radius: 8px;
    }
    td{
        padding-top:15px;
        padding-bottom:15px;
    }

</style>
<body >
<form action="" id="registerForm" onsubmit="return register()" style="background-color: #f0f8ff;width:400px;" >
    <table  <%--border="1px solid red"--%> cellspacing="0px" >
        <caption><h3>高校点名考勤系统</h3></caption>
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr >
            <td>用户名:</td>
            <td>
                <input type="text" id="username" name="username" placeholder="请输入用户名">
            </td>
        </tr>
        <tr>
            <td>密码:</td>
            <td>
                <input type="text" id="password" name="password" placeholder="请输入密码">
            </td>
        </tr>
        <tr>
            <td>用户角色:</td>
            <td>
                <select name="role" id="role" onchange="change()" size="1">
<%--                <option></option>--%>
                <option selected value="1">学生</option>
                <option value="2">任课老师</option>
                </select>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <div align="center">
                    <input type="submit" value="注册">
                    <input type="reset" value="重置">
                </div>
            </td>
        </tr>
    </table>
</form>
</body>
</html>
